<template>
  <div class="chartSystem fl pr mb20">
    <h4 class="chartTitle pa">体系政策统计</h4>
    <div id="chartSystem" style="width: 100%;height: 344px;"></div>
  </div>
</template>

<script>
import { postAjax, getAjax } from "../../../api/api.js";
import echarts from "echarts";
export default {
  name: "",
  data() {
    return {
      charts: "",
      datas:[],
      xData: [],
    };
  },
  methods: {
          //获取类型数量
      getSystemPolicyCount(){
        this.$Loading.start();
          getAjax('/policyInfo/getSystemPolicyCount')
          .then((response) => {
            if(response.data.code === 0){
              this.$Loading.finish();
              this.datas = [];
              let _this = this;
              response.data.obj.forEach(element => {
                _this.datas.push(element.count)
                _this.xData.push(element.system)
              });
               this.Pie("chartSystem");
            }else {
              this.$Loading.error();
              this.$Message.warning("数据请求异常");
            }
          })
      },
    Pie(id) {
      this.charts = echarts.init(document.getElementById(id));
      this.charts.setOption({
        tooltip : {
              trigger: 'axis',
              axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                  type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
              }
          },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          top:'20%',
          containLabel: true
        },
        xAxis : [
        {
            type : 'category',
            data :this.xData,
            axisTick: {
                alignWithLabel: true
            },
            axisLabel: {
              fontSize: 14,
              rotate:40,
              color: '#333'
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "#ccc",
                width: 1,
                type: "solid"
              },
            }
        }
        ],
        yAxis : [
        {
            type : 'value',
            axisLabel: {
              fontSize: 14,
              color: '#333'
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "#ccc",
                width: 1,
                type: "solid"
              },
            }

        }
        ],
        series : [
        {
            name:'',
            type:'bar',
            barWidth: '40%',
            data:this.datas,
            itemStyle: {
                  normal: {
                      color: function(params) {
                          // build a color map as your need.
                          var colorList = [
                              '#2299ee',
                              '#fba259',
                              '#2299ee',
                              '#fba259',
                              '#2299ee',
                              '#fba259',
                              '#2299ee',
                              '#fba259',
                              '#2299ee',
                              '#fba259',
                          ];
                          return colorList[params.dataIndex]
                      },
                      label: {
                          show: true,
                          position: 'top',
                          formatter: '{c}',
                          color: '#333',
                          fontSize: 14
                      }
                  }
            }
        }
        ]
      });
    }
  },
  //调用
  mounted() {
    this.getSystemPolicyCount()
    // this.$nextTick(function() {
    //   this.Pie("chartSystem");
    // });
  }
};
</script>
<style>
  .chartTitle{
    color: #333;
    top:15px;
    left:20px;
    font-size: 16px;
    display: inline-block;
    font-weight: bold;
  }

</style>
